<template>
  <div class="inputBox">
    <input
      :type="inputType"
      :placeholder="placeholder"
      @input="handler"
      :class="class_accurate"
    />
    <span class="check iconfont" :class="class_accurate">{{ checkTxt }}</span>
    <i :class="class_accurate"></i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      timer: "",
    };
  },
  // 组件传值
  props: {
    //   输入框提示
    placeholder: {
      type: [String, Number],
    },
    //  正则
    rules: {
      type: RegExp,
    },
    //  检查提醒
    checkTxt: {
      type: [String, Number],
    },
    //  输入框类型
    inputType: {
      type: String,
    },
    // 区分input
    class_accurate: {
      type: String,
    },
    // 错误提示
    tishi: {
      type: String,
    },
  },
  methods: {
    handler(e) {
      this.$emit("input", { e });

      // 如果输入框没有内容, 马上移除正确与错误的样式
      if (e.target.value.length == 0) {
        clearTimeout(this.timer);
        // console.log(e.target.value.length);
        document
          .querySelector("input." + this.class_accurate)
          .classList.remove("error", "success");
        document
          .querySelector("span." + this.class_accurate)
          .classList.remove("iconicon-test", "icondianzan");
        document.querySelector("i." + this.class_accurate).innerHTML = "";
      } else {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          //   判断正则
          if (this.rules) {
            if (this.rules.test(e.target.value)) {
              // document.querySelector("input").classList.remove("error");
              // document.querySelector("input").classList.add("success");
              // document.querySelector(".check").classList.remove("iconicon-test");
              // document.querySelector(".check").classList.add("icondianzan");
              // document.querySelector(".check").style.color = "green";

              document
                .querySelector("input." + this.class_accurate)
                .classList.remove("error");
              document
                .querySelector("input." + this.class_accurate)
                .classList.add("success");
              document
                .querySelector("span." + this.class_accurate)
                .classList.remove("iconicon-test");
              document
                .querySelector("span." + this.class_accurate)
                .classList.add("icondianzan");
              document.querySelector(
                "span." + this.class_accurate
              ).style.color = "green";

              document.querySelector("i." + this.class_accurate).style.color =
                "green";
              document.querySelector("i." + this.class_accurate).innerHTML =
                "格式正确";
            } else {
              // document.querySelector("input").classList.remove("success");
              // document.querySelector("input").classList.add("error");
              // document.querySelector(".check").classList.remove("icondianzan");
              // document.querySelector(".check").classList.add("iconicon-test");
              // document.querySelector(".check").style.color = "red";

              document
                .querySelector("input." + this.class_accurate)
                .classList.remove("success");
              document
                .querySelector("input." + this.class_accurate)
                .classList.add("error");
              document
                .querySelector("span." + this.class_accurate)
                .classList.remove("icondianzan");
              document
                .querySelector("span." + this.class_accurate)
                .classList.add("iconicon-test");
              document.querySelector(
                "span." + this.class_accurate
              ).style.color = "red";

              document.querySelector("i." + this.class_accurate).style.color =
                "red";
              document.querySelector("i." + this.class_accurate).innerHTML =
                "格式应为：" + this.tishi;
            }
          }
        }, 600);
      }
    },
  },
};
</script>

// 样式：
<style lang="less" scoped>
.inputBox {
  position: relative;
}
input {
  margin-bottom: 30px;
  padding-left: 10px;
  height: 50px;
  width: 318 * 100vw / 360;
  outline: none;
  border: none;
  border-bottom: 2px solid #ccc;
  font-size: 22px;
}
i {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 13px;
}
.success {
  border-color: rgba(0, 128, 0, 0.87);
}
.error {
  border-color: rgba(255, 0, 0, 0.781);
}

.check {
  position: absolute;
  top: 24px;
  right: 10px;
  color: #999;
  font-size: 18px;
}
</style>